Estoy construyendo una clase que se comparte entre un motor de juego y un editor. Hay algunas propiedades y métodos que quiero definir en el editor, pero no en el motor, así que escribí el siguiente código
class Asset{ constructor(){ this.prop1 = 1; } } if (window.IS_EDITOR){ Asset.prototype.editorProp = 2; } class Room extends Asset{ constructor(){ super(); this.prop2 = 3; console.log(this) //expected: {prop1: 1, prop2: 3, editorProp: 2} //what I get: {pro1: 1, prop2: 3} } } Básicamente, solo estoy tratando de agregar condicionalmente otra propiedad al constructor, pero estoy confundido por qué el editorProp no aparece cuando accedo a this .
Estoy confundido por qué el
editorPropno aparece cuando accedo athisarchivo .
Porque está en el prototipo de su objeto, al igual que el .constructor , y no se imprimirá de manera predeterminada cuando lo console.log . Lo encontrará si expande el prototipo o si console.log(Object.getPrototypeOf(this)) . Todavía puede acceder a él como this.editorProp con el valor esperado, ya que se hereda.
Estoy tratando de agregar condicionalmente otra propiedad al constructor.
Si desea agregar la propiedad a la instancia en el constructor, debería hacerlo en el constructor:
class Asset { constructor() { this.prop1 = 1; if (window.IS_EDITOR) { this.editorProp = 2; } } }Como se señaló, console.log solo registra el objeto, no lo que está en la cadena de prototipos. Entonces, hacer console.log(this.editorProp) de hecho devolverá 2 , ya que ahora se ha utilizado la cadena de prototipos.
Si desea ver el objeto in el prototipo aplanado, es bastante fácil hacerlo usando . En el siguiente ejemplo, he agregado una función simple llamada flat que hace esto.
También vale la pena señalar que agregar métodos a una clase los hará automáticamente no enumerables, pero si agrega un método al prototipo, será enumerable. Entonces, en un ejemplo a continuación, también agregué una función llamada fn pero usando defineProperty para evitar que sea enumerable.
window.IS_EDITOR = true; class Asset{ constructor(){ this.prop1 = 1; } } if (window.IS_EDITOR){ Asset.prototype.editorProp = 2; //adding a function this will will be //enumerable, so you might want to use //defineProperty here. Object.defineProperty( Asset.prototype, 'fn', {value: () => {console.log('fn called')}, enumerable: false}); } class Room extends Asset{ constructor(){ super(); this.prop2 = 3; console.log(this.flat()); this.fn(); //expected: {prop1: 1, prop2: 3, editorProp: 2} //what I get: {pro1: 1, prop2: 3} } flat() { const ret = {}; for (const i in this) ret[i] = this[i]; return ret; } } new Room();